<template>
  <div
    v-if="crud.props.searchToggle"
  >
    <el-input v-model="query.enterpriseName" clearable size="small" placeholder="请输入企业名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
    <el-input v-model="query.recruitPosition" clearable size="small" placeholder="请输入岗位名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
    <el-select
      v-model="query.education"
      clearable
      size="small"
      placeholder="学历要求"
      class="filter-item"
      style="width: 150px"
      @change="crud.toQuery"
    >
      <el-option
        v-for="item in educationList"
        :key="item.label"
        :label="item.label"
        :value="item.label"
      />    
    </el-select>
    <el-input v-model="query.headcount" clearable size="small" placeholder="请输入招聘人数" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
    <el-select
      v-model="query.salaryType"
      clearable
      size="small"
      placeholder="请选择薪资待遇"
      class="filter-item"
      style="width: 150px"
      @change="crud.toQuery"
    >
      <el-option
        v-for="item in salaryList"
        :key="item.label"
        :label="item.label"
        :value="item.label"
      /> 
    </el-select>
    <span v-if="query.salaryType=='年薪'||query.salaryType=='月薪'">
      <el-input v-model="query.salary" clearable size="small" placeholder="请输入薪资待遇" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery">
        <template slot="append">元</template>
      </el-input>
    </span>
      <el-select
      v-model="query.accommodation"
      clearable
      size="small"
      placeholder="是否提供住宿"
      class="filter-item"
      style="width: 150px"
      @change="crud.toQuery"
    >
      <el-option
        v-for="item in accommodationList"
        :key="item.label"
        :label="item.label"
        :value="item.label"
      />    
    </el-select>
    <el-select
      v-model="query.workMeal"
      clearable
      size="small"
      placeholder="是否提供工作餐"
      class="filter-item"
      style="width: 150px"
      @change="crud.toQuery"
    >
      <el-option
        v-for="item in workMealList"
        :key="item.label"
        :label="item.label"
        :value="item.label"
      />    
    </el-select>
    <el-input v-model="query.contact" clearable size="small" placeholder="请输入联系人联系方式" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
    <el-date-picker
      v-model="query.deadline"
      clearable
      size="small"
      placeholder="请选择截止日期"
      class="filter-item"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      style="width: 200px"
      @change="crud.toQuery"
    />
    <rrOperation />
    <!--<el-button class="filter-item" size="mini" type="primary" icon="el-icon-download" @click="exportData"  >导出</el-button> -->
  
    </div>
  </template>
  
  <script>
  import { header } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { educationList, accommodationList, workMealList, salaryList } from '@/utils/index.js';
  
  export default {
    components: { rrOperation },
    mixins: [header()],
    props: {
      permission: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        educationList,
        accommodationList,
        workMealList,
        salaryList
      }
    },
    created() {
  
    },
    // methods: {
    //   exportData() {
    //     downloadTheFile(`/business/excel/exportHouse`, '就业信息.xlsx', this.query)
    //   }
    // }
  }
  </script>
  